<template>
    <div class="tab-model">
        <div class=" main">
            <div class="head">
                <div class="head-box">
                    <h1 class="text-center">编辑标签</h1>
                    <a class="close pointer" @click="closeModel">x</a>
                </div>
            </div>
            <div class="body">
                <div class="title">
                    <p class="title-left">标签</p>
                    <p class="title-right">还可添加<span v-text="num"></span>个，多标签时按ENTER分隔</p>
                </div>
                <ul class="tab-box" @click="addTab">
                    <li class="tabs fl" v-for="(item,i) in tagData" :key="i">
                        <span>{{item}}</span>
                        <i @click="delTab(i)">×</i>
                    </li>
                    <li class="fl">
                        <input type="text" ref="strName" v-model="newTab" @input="judge" @blur="addNewTab" @keyup.enter="addNewTab"/>
                    </li>
                </ul>
                <div class="record">
                    <p class="record-title">最近使用过的标签</p>
                    <ul class="record-list">
                        <li class="pointer" v-for="(tag,key) in historyTag" :key="key" @click="createTab(tag)">
                            <p v-text="tag"></p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="foot">
                <div class="button">
                    <button @click="closeModel" class="cancel">取消</button>
                    <button class="confirm" @click="updateTab">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tagData: [],
        num: 50,
        newTab: '',
        historyTag: [],
      };
    },
    props: {
      tagList: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    model: {
      prop: 'tagList',
      event: 'change'
    },
    created() {
      this.tagData = this.tagList
      console.log(this.tagList)

    },
    mounted(){
      const historyList = localStorage.getItem('historyTagList')
      if(historyList && historyList !== ''){
        this.historyTag = JSON.parse(historyList)
      }
      this.addListenDelete()
      console.log(this.tagData)

    },
    watch: {
      tagList: function () {
        this.tagData = this.tagList
        console.log('------------------')
      }
    },
    methods: {

      closeModel: function () {
        this.$emit('closeModel', '')
      },

      delTab: function (key) {
        this.tagData.splice(key, 1);
      },

      judge: function () {
        if (this.newTab.length >= 11) {
          this.$message({
            type: 'warning',
            message: "标签最大长度为十个字符"
          });
          this.newTab = this.newTab.slice(0, 10);
        } else if (this.newTab.length === 0) {
          this.addListenDelete()
        } else {
          this.$refs.strName.onkeydown = null
        }
      },

      addListenDelete: function () {
        const that = this;
        this.$refs.strName.onkeydown = function (event) {
          if (event.keyCode === 8 && that.tagData.length > 0) {
            that.delTab(that.tagData.length - 1)
          } else if (event.keyCode === 8 && that.tagData.length === 0) {
            return that.message
          }
        }
      },

      updateTab: function () {
        const that = this
        if(this.tagData.length === 0){
          return this.message({
            type:'error',
            message:'请添加标签'
          })
        }
        this.$emit('change', this.tagData)
        this.closeModel()
        this.tagData.forEach(function (value) {
          if(that.historyTag.indexOf(value)  === -1){
            that.historyTag.push(value)
          }
        })
        localStorage.setItem('historyTagList',JSON.stringify(this.historyTag))
      },

      addTab: function () {
        this.$refs.strName.focus()
      },

      addNewTab: function () {
        this.createTab(this.newTab)
      },

      createTab: function (text) {
        if (text.length > 0) {
          if (this.tagData.indexOf(text) > -1) {
            return this.$message({
              type: 'warning',
              message: '已添加该标签'
            })
          }
          this.tagData.push(text);
          this.newTab = ''
          this.addListenDelete()
        }
      }
    }
  }
  ;
</script>

<style scoped>
    .tab-model {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 500;
    }

    .tab-model .main {
        width: 680px;
        height: 526px;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        margin: calc((100vh - 526px) / 2) auto 0;
    }

    .body {
        margin-top: 22px;
        padding: 0 25px;
    }

    .title {
        height: 50px;
        line-height: 50px;
    }

    .title .title-left {
        float: left;
        font-size: 14px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
    }

    .title .title-right {
        float: right;
        font-size: 14px;
        font-weight: 500;
        color: #999;
    }

    .tab-box {
        box-sizing: border-box;
        height: 204px;
        border: 1px solid rgba(226, 226, 226, 1);
        border-radius: 4px;
        padding: 15px;
        /* display: flex; */
        cursor: text;
    }


    .tab-box .tabs {
        height: 36px;
        display: inline-block;
        line-height: 36px;
        padding: 0 10px;
        background-color: #f4f4f4;
        margin-right: 10px;
        margin-bottom: 12px;
    }

    .tab-box .tabs span {
        margin-right: 12px;
    }

    .tab-box .tabs i {
        cursor: pointer;
    }

    .tab-box input {
        height: 36px;
        border: none;
        outline: none
    }

    .record {
    }

    .record .record-title {
        margin-top: 26px;
        margin-bottom: 12px;
        font-size: 14px;
        color: #999999;
    }

    .record .record-list {
        height: 88px;
        overflow: auto;
    }

    .record .record-list li {
        float: left;
        border: 1px solid rgba(226, 226, 226, 1);
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 8px;
        padding: 0 10px;
        line-height: 22px;
        font-size: 14px;
        color: #999999;
    }

    .foot {
        height: 70px;
    }

    .button {
        height: 40px;
        margin-top: 20px;
        float: right;
        margin-right: 35px;
    }

    .button .cancel {
        width: 90px;
        height: 40px;
        border: 1px solid rgba(226, 226, 226, 1);
        font-size: 14px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
    }

    .button .confirm {
        width: 90px;
        height: 40px;
        background: rgba(70, 144, 245, 1);
        border: none;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin-left: 14px;
    }

    .head {
        height: 34px;
    }

    .head-box {
        position: relative;
        height: 50px;
        background-color: #f0f0f0;
        top: 0;
        left: 0;
        border-radius: 6px 6px 0 0;
    }


    .head .head-box h1 {
        line-height: 50px;
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
    }

    .head .head-box .close {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 24px;
        color: #959595
    }


</style>
